import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';
import {
  bindActionCreators
} from 'redux';
import {
  connect
} from 'react-redux';
import rekitLogo from '../../images/rekit-logo.svg';
import * as actions from './redux/actions';

export class Home extends Component {
  static propTypes = {
    examples: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  render() {
    const html = `
    <div class="content">
    <section class="_135editor" data-tools="135编辑器" data-id="90318"
      style="background-color: rgba(0, 0, 0, 0); padding: 0px; box-sizing: border-box; background-repeat: repeat repeat;">
      <section style="padding: 10px; box-sizing: border-box;">
        <section style="width:100%; text-align:center; font-size:16px; color:#545455; line-height:30px;"
          data-width="100%"><br></section>
        <section style="width:100%; text-align:center; font-size:18px; color:#545455; line-height:30px;"
          data-width="100%"><span style="font-size: 32px;">How can we motivate students in
            teaching?</span></section>
        <section
          style="width: 100%; height: auto; overflow: hidden; background-size: 100%;  box-sizing: border-box; background-position: center bottom; background-repeat: no-repeat no-repeat;"
          data-width="100%">
          <section
            style="width:100%; display:flex; display:-webikt-flex; justify-content:space-between; -webkit-justify-content:space-between; align-items:stretch; -webkit-align-items:stretch; margin-top:30px;"
            data-width="100%">
            <section
              style="width: 45%; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-sizing: border-box;"
              data-width="45%"><img style="width:100%; height:100% !important; display:block;"
                src="https://image.135editor.com/uploadword/7339140/201910/5db5c6a8-1688-412f-8d56-04faac10006d.jpg"
                data-width="100%" data-ratio="0.68" data-op="change"
                _src="https://image.135editor.com/uploadword/7339140/201910/5db5c6a8-1688-412f-8d56-04faac10006d.jpg">
            </section>
            <section
              style="width: 45%; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-sizing: border-box;"
              data-width="45%"><img style="width:100%; height:100% !important; display:block;"
                src="https://image.135editor.com/uploadword/7339140/201910/5db5c6f4-9834-4737-91f7-04b1ac10006d.jpg"
                data-width="100%" data-ratio="0.665" data-op="change"
                _src="https://image.135editor.com/uploadword/7339140/201910/5db5c6f4-9834-4737-91f7-04b1ac10006d.jpg">
            </section>
          </section>
          <section
            style="width:100%; display:flex; display:-webikt-flex; justify-content:space-between; -webkit-justify-content:space-between; text-align:center; line-height:30px;"
            data-width="100%">
            <section style="width:45%; font-size:14px; color:#545454;" data-width="45%"><br>
            </section>
          </section>
          <section
            style="width:100%; display:flex; display:-webikt-flex; justify-content:space-between; -webkit-justify-content:space-between; align-items:stretch; -webkit-align-items:stretch; margin-top:30px;"
            data-width="100%">
            <section
              style="width: 45%; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-sizing: border-box;"
              data-width="45%"><img style="width:100%; height:100% !important; display:block;"
                src="https://image.135editor.com/uploadword/7339140/201910/5db5c721-8178-4020-94cf-04cbac10006d.jpg"
                data-width="100%" data-ratio="0.65" data-op="change"
                _src="https://image.135editor.com/uploadword/7339140/201910/5db5c721-8178-4020-94cf-04cbac10006d.jpg">
            </section>
            <section
              style="width: 45%; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; box-sizing: border-box;"
              data-width="45%"><img style="width:100%; height:100% !important; display:block;"
                src="https://image.135editor.com/uploadword/7339140/201910/5db5c72c-3858-458b-96c1-04e5ac10006d.jpg"
                data-width="100%" data-ratio="0.67" data-op="change"
                _src="https://image.135editor.com/uploadword/7339140/201910/5db5c72c-3858-458b-96c1-04e5ac10006d.jpg">
            </section>
          </section>
          <section
            style="width:100%; display:flex; display:-webikt-flex; justify-content:space-between; -webkit-justify-content:space-between; text-align:center; line-height:30px;"
            data-width="100%">
            <section style="width:45%; font-size:14px; color:#545454;" data-width="45%"><br>
            </section>
            <section style="width:45%; font-size:14px; color:#545454;" data-width="45%"><br><br>
            </section>
          </section>
        </section>
      </section>
    </section>
    <section data-tplid="91195" data-tools="135编辑器">
      <section style="width: 90%;margin: 0 auto;font-size: 14px;color: #666">
        <p><br></p>
      </section>
      <section style="padding: 0px; border: 0px none; box-sizing: border-box;" class="_135editor">
        <section
          style="width: 100%; text-align: center; border: 0px none; padding: 0px; box-sizing: border-box;"
          class="_135editor">
          <section style="width: 220px;margin: 0 auto">
            <section class="_135editor" data-tools="135编辑器" data-id="95257">
              <section class="_135editor">
                <section style="width:50px;margin: 0px auto;"><img
                    style="width: 100%;display: block;"
                    src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvN1FSVHZrSzJxQzdUM01oU3dmblBpY21Hekd3aDJ2a3pKOWlhWUx5aEF4Q1JZYmh6VEVObG5MaWI0dURZTmRPaWEzRTdWTktJVUltaWNXNElpY21QT1JSVGdhOXcvMD93eF9mbXQ9cG5n"
                    data-ratio="1" data-width="100%"
                    _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvN1FSVHZrSzJxQzdUM01oU3dmblBpY21Hekd3aDJ2a3pKOWlhWUx5aEF4Q1JZYmh6VEVObG5MaWI0dURZTmRPaWEzRTdWTktJVUltaWNXNElpY21QT1JSVGdhOXcvMD93eF9mbXQ9cG5n">
                </section>
              </section>
            </section>
          </section>
        </section>
        <section data-role="paragraph" style="border: 0px none; padding: 0px; box-sizing: border-box;">
          <section class="_135editor" data-tools="135编辑器" data-id="94703">
            <section class="_135editor" data-tools="135编辑器" data-id="94703">
              <section style="width: 300px;margin: 0px auto;"><img
                  style="width: 100%;display: block;"
                  src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUhOaWFFcHRCWkQ4aGpacmI4TUZlaWNpY3JwdE5qY0RKZk1aRXFmVHA2OGliOVFpYmcxaWFxRmE1emdpY0d3LzA/d3hfZm10PWdpZg=="
                  data-width="100%" data-ratio="0.14100185528756956"
                  _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUhOaWFFcHRCWkQ4aGpacmI4TUZlaWNpY3JwdE5qY0RKZk1aRXFmVHA2OGliOVFpYmcxaWFxRmE1emdpY0d3LzA/d3hfZm10PWdpZg==">
              </section>
            </section>
          </section>
          <p><br></p>
        </section>
      </section>
      <section style="padding: 0px; border: 0px none; box-sizing: border-box;">
        <section class="_135editor" style="border: 0px none; padding: 0px; box-sizing: border-box;">
          <section style="width: 90%;margin: 20px auto;font-size: 14px;color: #666">
            <p style="line-height: 200%; text-indent: 2em;"><span
                style="font-size: 20px; line-height: 107%; font-family: 'Times New Roman';">Motivation
                falls
                into the affective domain, which is the emotional side of human behavior. It is
                commonly thought
                of as an inner driver, impulse, emotion or desire that moves one to a particular
                action. And it
                is generally held that the failure or success of a task is due to the fact that
                one is motivated
                or not. Second language acquisition is of no exception.</span></p>
          </section>
          <section style="width: 100%;display: flex;display:-webkit-flex">
            <section style="width: 50%;margin-right: 3px;"><img
                src="https://image.135editor.com/uploadword/7339140/201910/5db5c77b-e8b4-4c12-8889-04e6ac10006d.jpg"
                alt="" style="width: 100%" data-ratio="0.7510917030567685" data-op="change"
                _src="https://image.135editor.com/uploadword/7339140/201910/5db5c77b-e8b4-4c12-8889-04e6ac10006d.jpg">
            </section>
            <section style="width: 50%;margin-left: 3px;"><img
                src="https://image.135editor.com/uploadword/7339140/201910/5db5c787-ce2c-42b7-9a14-04c4ac10006d.jpg"
                alt="" style="width: 100%" data-ratio="0.7510917030567685" data-op="change"
                _src="https://image.135editor.com/uploadword/7339140/201910/5db5c787-ce2c-42b7-9a14-04c4ac10006d.jpg">
            </section>
          </section>
        </section>
      </section>
      <section data-role="paragraph" style="border: 0px none; padding: 0px; box-sizing: border-box;">
        <p><br></p>
      </section>
      <section style="padding: 0px; border: 0px none; box-sizing: border-box;" class="_135editor">
        <section style="width: 100%;text-align: center;">
          <section class="_135editor" data-tools="135编辑器" data-id="94703">
            <p><br></p>
            <section class="_135editor" data-tools="135编辑器" data-id="94703">
              <section class="_135editor" data-tools="135编辑器" data-id="95257">
                <section class="_135editor">
                  <section style="width:50px;margin: 0px auto;"></section>
                </section>
              </section>
              <section class="_135editor" data-tools="135编辑器" data-id="94676">
                <section style="width: 300px;margin: 0px auto;"><img
                    style="width: 100%;display: block;"
                    src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUh6WnJUVDRVWkFjdWtDM2NLcWV0U0hwR0pBQkw4WkNNOHlpYkx5TnB2WTJaaWEzSUFZM1A2eUU5QS8wP3d4X2ZtdD1naWY="
                    data-width="100%" data-ratio="0.196875"
                    _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUh6WnJUVDRVWkFjdWtDM2NLcWV0U0hwR0pBQkw4WkNNOHlpYkx5TnB2WTJaaWEzSUFZM1A2eUU5QS8wP3d4X2ZtdD1naWY=">
                </section>
              </section>
              <p><br></p>
            </section>
            <section class="_135editor" data-tools="135编辑器" data-id="94025">
              <section style="text-align: left;">
                <section style="width: 5em;display: inline-block;"><img
                    style="width: 100%;display: block;"
                    src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzVybGplQnc4T0hsUmozRnhFNjd0WDhJaWFHZFdVczlpYkJiV3c0QmE1UGpoMWljM3ppYzZSaGliYU03R2JwSWJJWUFibFpqMEUwNTNudmR4US8wP3d4X2ZtdD1naWY="
                    data-width="100%" data-ratio="0.7633587786259542"
                    _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzVybGplQnc4T0hsUmozRnhFNjd0WDhJaWFHZFdVczlpYkJiV3c0QmE1UGpoMWljM3ppYzZSaGliYU03R2JwSWJJWUFibFpqMEUwNTNudmR4US8wP3d4X2ZtdD1naWY=">
                </section>
              </section>
            </section>
            <p><br></p>
          </section>
          <section style="width: 90%;margin: 20px auto;font-size: 14px;color: #666">
            <p style="text-align:left; line-height: 200%; text-indent: 2em;"><span
                style="font-size: 20px; font-family: 'Times New Roman';">It is a common
                phenomenon in
                traditional teaching in China that teachers tend to instill knowledge into
                students’ heads and
                pay more attention to the development of their professional knowledge and
                proficiency. The
                crucial factors that influence the results of students’ study, like motivation,
                are always
                neglected. Therefore, we’d like to arouse teachers’ attention to how to motivate
                students with
                the help of this website. We will introduce the merits and demerits of
                progressive teaching,
                democratic teaching and behaviorist method, and provide some practical
                suggestions. After
                reading this website, you may come up with some ideas about how to motivate
                students
                intrinsically and extrinsically so that you can promote your teaching.</span>
            </p>
            <p style="text-align:left;"><br></p>
          </section>
        </section>
      </section>
      <section style="padding: 10px; box-sizing: border-box;">
        <section style="width: 100%;text-align: center;">
          <section class="_135editor" data-tools="135编辑器" data-id="94703">
            <p><br></p>
            <section class="_135editor" data-tools="135编辑器" data-id="94676">
              <section style="width: 300px;margin: 0px auto;"><img
                  style="width: 100%;display: block;"
                  src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUh6WnJUVDRVWkFjdWtDM2NLcWV0U0hwR0pBQkw4WkNNOHlpYkx5TnB2WTJaaWEzSUFZM1A2eUU5QS8wP3d4X2ZtdD1naWY="
                  data-width="100%" data-ratio="0.196875"
                  _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUh6WnJUVDRVWkFjdWtDM2NLcWV0U0hwR0pBQkw4WkNNOHlpYkx5TnB2WTJaaWEzSUFZM1A2eUU5QS8wP3d4X2ZtdD1naWY=">
              </section>
            </section>
            <section class="_135editor" data-tools="135编辑器" data-id="94025">
              <section style="text-align: left;">
                <section style="width: 5em;display: inline-block;"><img
                    style="width: 100%;display: block;"
                    src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzVybGplQnc4T0hsUmozRnhFNjd0WDhJaWFHZFdVczlpYkJiV3c0QmE1UGpoMWljM3ppYzZSaGliYU03R2JwSWJJWUFibFpqMEUwNTNudmR4US8wP3d4X2ZtdD1naWY="
                    data-width="100%" data-ratio="0.7633587786259542"
                    _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzVybGplQnc4T0hsUmozRnhFNjd0WDhJaWFHZFdVczlpYkJiV3c0QmE1UGpoMWljM3ppYzZSaGliYU03R2JwSWJJWUFibFpqMEUwNTNudmR4US8wP3d4X2ZtdD1naWY=">
                </section>
              </section>
            </section>
            <p><br></p>
          </section>
        </section>
        <section style="width: 90%;margin: 20px auto;font-size: 14px;color: #666">
          <p style="text-align:left; text-indent: 2em;"><span style="font-size: 20px;"></span><span
              style="font-size: 20px; line-height: 107%; font-family: 'Times New Roman';">&nbsp;A
              motivation can
              be intrinsic or extrinsic. Intrinsic activities are ones for which there is no
              apparent reward
              except the activity itself. Extrinsic motivated behaviors, on the other hand, are
              carried out in
              anticipation of a reward from outside and beyond the self.</span></p>
        </section>
        <section style="width: 100%;display: flex;display:-webkit-flex">
          <section style="width: 50%;margin-right: 3px;"><img
              src="https://image.135editor.com/uploadword/7339140/201911/5dc11f1a-270c-4504-b511-28f4ac100069.jpg"
              alt="" style="width: 100%" data-ratio="0.7488584474885844" data-op="change"
              _src="https://image.135editor.com/uploadword/7339140/201911/5dc11f1a-270c-4504-b511-28f4ac100069.jpg">
          </section>
          <section style="width: 50%;margin-left: 3px;"><img
              src="https://image.135editor.com/uploadword/7339140/201911/5dc11f05-65e8-432c-8a40-291aac100069.jpg"
              alt="" style="width: 100%" data-ratio="0.7488584474885844" data-op="change"
              _src="https://image.135editor.com/uploadword/7339140/201911/5dc11f05-65e8-432c-8a40-291aac100069.jpg">
          </section>
        </section>
      </section>
      <section style="padding: 10px; box-sizing: border-box;">
        <section style="width: 100%;text-align: center;">
          <section class="_135editor" data-tools="135编辑器" data-id="94703">
            <p style="text-align:left;">&nbsp; &nbsp;Intrinsic motivation &nbsp; &nbsp; &nbsp;
              &nbsp; &nbsp; &nbsp;
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              &nbsp;Extrinsic motivation</p>
          </section>
          <section class="_135editor" data-tools="135编辑器" data-id="94676">
            <section style="width: 300px;margin: 0px auto;"><img style="width: 100%;display: block;"
                src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUh6WnJUVDRVWkFjdWtDM2NLcWV0U0hwR0pBQkw4WkNNOHlpYkx5TnB2WTJaaWEzSUFZM1A2eUU5QS8wP3d4X2ZtdD1naWY="
                data-width="100%" data-ratio="0.196875"
                _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzV4Nkphd1ZseFl3cnNmNE94aEl6MUh6WnJUVDRVWkFjdWtDM2NLcWV0U0hwR0pBQkw4WkNNOHlpYkx5TnB2WTJaaWEzSUFZM1A2eUU5QS8wP3d4X2ZtdD1naWY=">
            </section>
          </section>
          <p><br></p>
        </section>
        <section style="width: 100%;display: flex;display:-webkit-flex">
          <section style="width: 50%;margin-left: 3px;"></section>
        </section>
      </section>
      <section style="padding: 10px; box-sizing: border-box;">
        <section>
          <section
            style="width: 100%; border-bottom: 1px solid rgb(51, 51, 51); font-size: 14px; box-sizing: border-box;">
            <br></section>
        </section>
        <section style="padding: 0px; border: 0px none; box-sizing: border-box;" class="_135editor">
          <section style="width: 100%;text-align: center;font-size: 14px;color: #666">
            <section class="_135editor" data-tools="135编辑器" data-id="95257">
              <section class="_135editor">
                <section style="width:200px;margin: 30px auto;"><img
                    style="width: 100%;display: block;"
                    src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvN1FSVHZrSzJxQzdUM01oU3dmblBpY21Hekd3aDJ2a3pKOWlhWUx5aEF4Q1JZYmh6VEVObG5MaWI0dURZTmRPaWEzRTdWTktJVUltaWNXNElpY21QT1JSVGdhOXcvMD93eF9mbXQ9cG5n"
                    data-ratio="1" data-width="100%"
                    _src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvN1FSVHZrSzJxQzdUM01oU3dmblBpY21Hekd3aDJ2a3pKOWlhWUx5aEF4Q1JZYmh6VEVObG5MaWI0dURZTmRPaWEzRTdWTktJVUltaWNXNElpY21QT1JSVGdhOXcvMD93eF9mbXQ9cG5n">
                </section>
              </section>
            </section>
            <p style="width: 220px;margin: 0 auto"><br></p>
            <p style="width: 220px;margin: 0 auto"><br></p>
            <p style="width: 220px;margin: 0 auto"><br></p>
          </section>
        </section>
      </section>
      <p><br></p>
      <p><br></p>
    </section>
    <section data-role="paragraph" class="_135editor">
      <p></p>
    </section>
  </div>
  `
    return ( 
    <div dangerouslySetInnerHTML = {{__html: html}} > </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    examples: state.examples,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      ...actions
    }, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);